<template >
  <!-- 页头 -->
  <div style="margin-left: 20px; margin-top: 20px" id="checkDeposit">
    <template>
      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="money" label="金额"> </el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="userId" label="员工ID"></el-table-column>
        <el-table-column fixed="right" label="凭证">
          <template>
            <el-button type="text" size="small" @click="updateUser"
              >查看凭证</el-button
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template>
            <el-button type="text" size="small">已审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </template>
    <!-- 模态框 -->
    <el-dialog
      width="600px"
      :title="title"
      :visible.sync="dialogAddgsVisible"
      @close="closeDialogAddgsVisible"
    >
      <div class="checkIndex-dialog">
        <div
          class="checkDeposit-box"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        ></div>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import qs from "querystring";
export default {
  created() {
    this.$axios.defaults.headers.post["Content-Type"] =
      "application/x-www-form-urlencoded";
  },
  data() {
    return {
      loading: true,
      tableData: [],
      page: 0,
      pageSize: 6,
      realname: "",
      total: 1,
      telephone: "",
      status: "",
      title: "添加员工",
      dialogAddgsVisible: false,
      addCustomer: {
        realname: "",
        id: "",
        idCard: "",
      },
      formLabelWidth: "120px",
    };
  },
  mounted() {
    //页面载入时就发送axios请求
    var obj = {
      page: this.page,
      pageSize: this.pageSize,
    };
    this.$axios.post("/waiter/queryShou", qs.stringify(obj)).then((res) => {
      console.log(res);
      //获取用户数量分页
      var total = res.data.data.total;

      this.total = Math.ceil(total / this.pageSize) * 10;

      this.tableData = res.data.data.list;
      console.log(this.tableData);
      this.getType();
      //   console.log(this.total);
    });
  },
  methods: {
    //页面改变时重新查询
    changePage(currentPage) {
      console.log(currentPage);
      this.page = currentPage - 1;
      this.getUser();
    },
    //封装获取用户函数
    getUser() {
      var obj = {
        page: this.page,
        pageSize: this.pageSize,
      };
      if (this.status != "") {
        obj.status = this.status;
      }
      console.log(obj);
      this.$axios.post("/waiter/queryShou", qs.stringify(obj)).then((res) => {
        console.log(res);
        //获取用户数量分页
        var total = res.data.data.total;
        this.total = Math.ceil(total / this.pageSize) * 10;
        this.tableData = res.data.data.list;
        console.log(this.tableData);
        //   console.log(this.total);
        this.getType();
      });
    },
    //关闭模态框
    closeDialogAddgsVisible() {
      //   this.$refs.addForm.resetFields();
      //element封装的方法,清空模态框的值
      this.title = ""; //初始化title的值
    },
    //审核用户
    updateUser(data) {
      //数据回显
      this.title = "凭证";
      //启用模态框
      this.dialogAddgsVisible = true;
    },
    //提交模态框
    saveAddForm(addForm) {
      var self = this;
      this.$refs[addForm].validate((valid) => {
        //通过验证
        if (valid) {
          //将用户输入数据获取
          var obj = self.addCustomer;
          obj.type = "waiter";
          obj.enabled = true;
          if (obj.status == "") {
            obj.status = "启用";
            console.log("启用");
          }
          if (obj.registerTime == "" || obj.registerTime == null) {
            obj.registerTime = Date.now();
            console.log(obj.registerTime);
          }

          //判断是更新还是添加,如果有id就将id也传进去
          if (this.addCustomer.id != "") {
            obj.id = this.addCustomer.id;
          }
          this.$axios
            .post("/waiter/saveOrUpdate", qs.stringify(obj))
            .then((res) => {
              if (res.data.status == 200) {
                self.getUser();
                self.$message({
                  message: "更新成功",
                  type: "success",
                });
              } else {
                console.log("添加出错");
                self.$message.error("网络出错");
              }
            });
          this.dialogAddgsVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取时间
    getType() {
      this.tableData.filter((item, index) => {
        return (item.type = "提现");
      });
    },
    //通过审核
    auditing() {
      var id = this.addCustomer.id;
      var self = this;
      this.$axios
        .get("/waiter/auditing", { params: { id, img1: "123", img2: "256" } })
        .then((res) => {
          console.log(res);
          if (res.data.status == 200) {
            self.getUser();
            self.$message({
              message: "更新成功",
              type: "success",
            });
          } else {
            console.log("添加出错");
            self.$message.error("后台接口未实现");
          }
        });
      this.dialogAddgsVisible = false;
    },
    //拒绝审核
    refusauditing() {
      var id = this.addCustomer.id;
      console.log(id);
      var self = this;
      var obj = {
        id,
      };
      this.$axios
        .post("/waiter/refusauditing", qs.stringify(obj))
        .then((res) => {
          console.log(res);
          if (res.data.status == 200) {
            self.getUser();
            self.$message({
              message: "更新成功",
              type: "success",
            });
          } else {
            console.log("添加出错");
            self.$message.error("网络出错");
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
#checkDeposit {
  .checkDeposit-box {
    height: 400px;
    width: 400px;
    margin: 10px auto;
    background-color: #f5f7fa;
  }
}
</style>
